<template>
	<view>
		<view class="feedback-title">意见反馈：</view>
		<view class="feedback-content">
			<textarea class="feedback-textare" v-model='content' placeholder="请输入您要反馈的问题"></textarea>
		</view>
		<view class="feedback-title">反馈图片：</view>
		<view class="feedback-image-box">
			<view class="feedback-image-item" v-for="(item, index) in imageLists" :key="index">
				<view class="close-icon" @click="del(index)">
				    <uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
				</view>
				<view class="image-box">
				  <image :src="item.url" mode="aspectFill"></image>
				</view>
			</view>
			
			<view v-if="imageLists.length < 5 " class="feedback-image-item" @click="addImage">
				<view class="image-box">
				  <uni-icons type="plusempty" size="50" color="#eee"></uni-icons>
				</view>
			</view>
		</view>
		<button class="feedback-button" type="primary" @click="submit">提交反馈意见</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageLists:[],
				content:'',
			}
		},
		methods: {
			addImage(){
				const count = 5 - this.imageLists.length
				let _this=this
				uni.chooseImage({
					count:count,//H5 不是
					success(res){
						console.log('res :',res)
						//要上传的文件对象
						const tempFilePaths = res.tempFilePaths
						
						//非微信小程序
						const tempFilesName = res.tempFiles
						//微信小程序
						const WeixinTempFilesName = res.tempFiles
						console.log("WeixinTempFilesName 2:",WeixinTempFilesName)
						const type = res.tempFiles
						// if(tempFilePaths===null)return console.log("tempFilePaths未取到值:",tempFilePaths)
						console.log("tempFilePaths:",tempFilePaths)
						for(let i=0; i < tempFilePaths.length; i++){
							if(i < count){
								_this.imageLists.push({
									url:tempFilePaths[i],
									
									//#ifndef MP-ALIPAY || MP-WEIXIN
									tempFilesName:tempFilesName[i].name,
								    type:tempFilesName[i].type,
									//#endif
									
									//#ifdef MP-WEIXIN
									WeixinTempFilesName:WeixinTempFilesName[i].path,
									// console.log("tempFilePaths:",tempFilePaths)
									//#endif
								})
							}
							
						}
						console.log("_this.imageLists.WeixinTempFilesName:",_this.imageLists)
						console.log('_this.imageLists :',_this.imageLists)
					}
					// //改变this指向
					// success:(res)=>{
					// 	console.log(res)
					// 	const tempFilePaths = res.tempFilePaths
					// 	tempFilePaths.forEach((item, index)=>{
					// 		console.log("item",item)
					// 		console.log("index",index)
					// 		_this.imageLists.push({  //this的指向是uni.chooseImage
					// 			url:item
					// 		})
					// 	})
					// }
				})
			},
			del(index){
				this.imageLists.splice(index,1)
			},
			 async submit(){
				 if(this.content === ''){
				 	return uni.showToast({
				 		title:"请填写内容再提交",
						icon:"none"
				 	})
				 }
				let imagesPath = []
				 console.log('imagesPath 1:',imagesPath)
				uni.showLoading()
			   for(let i = 0; i < this.imageLists.length; i++){
			       const filePath = this.imageLists[i].url
				   
				   //#ifndef MP-ALIPAY 
				   const imageListsName = this.imageLists[i].tempFilesName //微信小程序没有tempFilesName
				   const fileType = this.imageLists[i].type
				   //#endif
				   
				   //#ifdef MP-WEIXIN
				    const WeixinTempFilesName = this.imageLists[i].WeixinTempFilesName
				   //#endif
				   console.log('imageListsName:',imageListsName)
				   
				   // console.log("filePath:",filePath)
				   // console.log("imageListsName:",imageListsName)
				   //#ifdef MP-ALIPAY || MP-WEIXIN
				   filePath = await this.uploadFiles(filePath,imageListsName,fileType,WeixinTempFilesName)
				   //#endif
				   //#ifndef MP-ALIPAY || MP-WEIXIN
				   filePath = await this.uploadFiles(filePath,imageListsName,fileType)
				   //#endif
				   imagesPath.push(filePath)
				    console.log('filePath 1:',filePath)
			   }
			   console.log('imagesPath 2:',imagesPath)
			   // console.log('WeixinTempFilesName 3:',WeixinTempFilesName)
			   // uni.hideLoading()
			   this.updateFeedack({
				   content:this.content,
				   feedbackImages:imagesPath
			   })
			   
			},
			async uploadFiles(filePath,imageListsName,fileType,WeixinTempFilesName){
				console.log("WeixinTempFilesName 1:",WeixinTempFilesName)
				// console.log(typeof imageListsName)
				const result = await uniCloud.uploadFile({
				    filePath: filePath,  //需要
					//#ifndef MP-WEIXIN 
					cloudPath:imageListsName,  //需要    腾讯云cloudPath为文件标识，相同的cloudPath会覆盖，如果没有权限覆盖则会上传失败。阿里云以自动生成的ID为文件标识，不会存在覆盖问题
					// fileType: fileType, 
					//#endif
					
					//#ifdef MP-WEIXIN 
					// cloudPath: String(WeixinTempFilesName),//cloud path is invalid at e.
					// cloudPath:String(Math.random() * 5)+ '.jpg'
					 cloudPath:"img/" + new Date().getTime() +"-"+ Math.floor(Math.random() * 1000),//fail exceed max upload connection count 1
					// String(imageListsName)
					// console.log('imageListsName:',imageListsName)
					// cloudPath:imageListsName,
					
					// fileType: fileType, 
					//#endif
					// success(res) {
					// 		console.log(res.fileID)
					// 		// let imageUrl = res.fileID  //云端返回的图片地址
					// 	},
					// fail(err) {
					// 		console.log(err)
					// 	},
					// complete() {
					// 	 console.log("complete完成")
					// 	}
				})
				console.log('result:',result)
				return result.fileID
			},
			
			updateFeedack({content,feedbackImages}){
				console.log(content)
				this.$api.update_feedback({
					content,
					feedbackImages
				}).then(res=>{
					console.log(res)
					uni.hideLoading()
					uni.showToast({
						title:"反馈提交成功",
						icon:"none"
					})
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/me/me"
						})
					},2000)
					// this.content='';
					// this.imageLists=[];
				}).catch(()=>{
					uni.hideLoading()
					uni.showToast({
						title:"反馈提交失败",
						icon:"none"
					})
				})
			}
		}
	}
</script>

<style lang='scss'>
.feedback-title{
	margin:15px;
	margin-bottom: 0;
	font-size: 14px;
	color:#666;
}
.feedback-content{
	margin:15px;
	padding:10px;
	box-sizing: border-box;
	border:1px solid #eee;
	
	.feedback-textare{
		font-size: 12px;
		width:100%;
		height:100px;
	}
}
.feedback-image-box{
	/* width: 100%; */
	/* border:1px solid blue; */
	display: flex;
	flex-wrap: wrap;
	padding:10px;
	
	.feedback-image-item{
		position: relative;
		width:33.33%;
		
		/*高度撑开---*/
		height: 0;
		padding-top:33.33%;
		box-sizing: border-box;
		/*---高度撑开*/
		
		.close-icon{
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 0;
			top:0;
			width: 22px;
			height:22px;
			border-radius: 50%;
			background-color: #ff5a5f;
			z-index: 2;
		}
		
		.image-box{
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top:5px;
			right: 5px;
			left:5px;
			bottom: 5px;
			border:1px solid #eee;
			border-radius: 5px;
			overflow: hidden;
			
			image{
				height:100%;
				width: 100%;
			}
		}
	}
}
.feedback-button{
	margin:0 15px;
	background-color: $mk-base-color;
}
</style>
